<!DOCTYPE html>
<html lang=en>
<head>
	<meta charset=UTF-8>
	<title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 &amp; CSS3</title>
	<!--[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]-->
	<link href=styles.css rel=stylesheet />
	<!--[if lt IE 9]><link href=ie.css rel=stylesheet /><![endif]-->
</head>

<body>
<header>
	<hgroup>
		<h1><a href=#>Fictive Company Blog</a></h1>
		<h2>a blog showcasing the übercoolness of HTML5 &amp; CSS3</h2>
	</hgroup>
	<nav id=global>
		<ul>
			<li><a href=#>Home</a></li>
			<li><a href=#>About</a></li>
			<li id=services>
				<a href=#>Services</a>
				<ul id=subMenu>
					<li><a href=#>Whatever</a></li>
					<li><a href=#>Your Heart</a></li>
					<li><a href=#>Desires</a></li>
				</ul>
			</li>
			<li><a href=#>Portfolio</a></li>
			<li><a href=#>Contact</a></li>
		</ul>
	</nav>
</header>

<div class=clearfix>
	<div id=content>
		<article>
			<header>
				<div class=time>
					<div class=year>2010</div>
					<div class=date>16<span>apr</span></div>
				</div>
				<h1>Sample Post 1</h1>
				<div class=comments>38</div>
			</header>
			<p>Curabitur ut congue hac, diam turpis maecenas id vestibulum nulla nisl, libero leo, ut scelerisque maecenas id, ornare magna orci. In blandit sed et sagittis non, ullamcorper nec metus felis vel, vestibulum a in sit. Leo non odio fermentum lectus cubilia, mauris aliquam nunc eu neque ac sollicitudin. Tincidunt nisl morbi nulla rutrum, adipisicing tellus integer nunc massa id quis. Cursus sagittis massa ac sociis interdum, sem cursus, enim aptent sit, semper mauris, quam urna sed quis vivamus&hellip;</p>
			<footer>
				<em>Written by:</em> <strong>Author Name</strong>
				<span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span>
				<a class=button href=#>Continue Reading</a>
			</footer>
		</article>
		<article>
			<header>
				<div class=time>
					<div class=year>2010</div>
					<div class=date>29<span>mar</span></div>
				</div>
				<h1>Sample Post 2</h1>
				<div class=comments>4</div>
			</header>
			<p>Curabitur ut congue hac, diam turpis maecenas id vestibulum nulla nisl, libero leo, ut scelerisque maecenas id, ornare magna orci. In blandit sed et sagittis non, ullamcorper nec metus felis vel, vestibulum a in sit. Leo non odio fermentum lectus cubilia, mauris aliquam nunc eu neque ac sollicitudin. Tincidunt nisl morbi nulla rutrum, adipisicing tellus integer nunc massa id quis. Cursus sagittis massa ac sociis interdum, sem cursus, enim aptent sit, semper mauris, quam urna sed quis vivamus&hellip;</p>
			<footer>
				<em>Written by:</em> <strong>Author Name</strong>
				<span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span>
				<a class=button href=#>Continue Reading</a>
			</footer>
		</article>
		<article>
			<header>
				<div class=time>
					<div class=year>2010</div>
					<div class=date>4<span>feb</span></div>
				</div>
				<h1>Sample Post 3</h1>
				<div class=comments>258</div>
			</header>
			<p>Curabitur ut congue hac, diam turpis maecenas id vestibulum nulla nisl, libero leo, ut scelerisque maecenas id, ornare magna orci. In blandit sed et sagittis non, ullamcorper nec metus felis vel, vestibulum a in sit. Leo non odio fermentum lectus cubilia, mauris aliquam nunc eu neque ac sollicitudin. Tincidunt nisl morbi nulla rutrum, adipisicing tellus integer nunc massa id quis. Cursus sagittis massa ac sociis interdum, sem cursus, enim aptent sit, semper mauris, quam urna sed quis vivamus&hellip;</p>
			<footer>
				<em>Written by:</em> <strong>Author Name</strong>
				<span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span>
				<a class=button href=#>Continue Reading</a>
			</footer>
		</article>
	</div>
	
	<aside>
		<section>
			<h1>Stay in Touch</h1>
			<ul id=inTouch>
				<li><span class=twitter>12345</span> <a href=#>Twitter</a> followers</li>
				<li><span class=rss>4321</span> <a href=#>RSS feed</a> subscribers</li>
			</ul>
		</section>
		
		<nav>
			<h1>Blogroll</h1>
			<ul class=links>
				<li><a href=#>A List of</a></li>
				<li><a href=#>Friendly Blogs</a></li>
				<li><a href=#>That have Exchanged</a></li>
				<li><a href=#>Links with Us</a></li>
			</ul>
		</nav>
		
		<section>
			<blockquote>It's as cunning as a fox that used to be the Professor of Cunning at Oxford University</blockquote>
			<a class=twitterHandle href=#>@TheBlackAdder</a>
		</section>
	</aside>
</div>

<footer class=clearfix>
		<section>
			<h1>Popular Posts</h1>
			<ul class=links>
				<li><a href=#>Lacus suspendisse risus consequat nec nunc quis sed</a></li>
				<li><a href=#>Diam turpis maecenas</a></li>
				<li><a href=#>Leo egestas cursus erat sed curabitur</a></li>
				<li><a href=#>Scelerisque maecenas id</a></li>
				<li><a href=#>Ornare magna orci</a></li>
			</ul>
		</section>
		<section>
			<h1>Recent Comments</h1>
			<ul id=comments>
				<li>
					<a href=#>Tincidunt justo sed feugiat eget ligula nec, porta luctus&hellip;</a>
					<span class=newLine><strong>Comment Author</strong>, 20. 04. 2010.</span>
				</li>
				<li>
					<a href=#>Primis suspendisse tellus facilisis&hellip;</a>
					<span class=newLine><strong>Comment Author</strong>, 5. 04. 2010.</span>
				</li>
				<li>
					<a href=#>Sed vestibulum, ut pulvinar iaculis nam ullamcorper pharetra&hellip;</a>
					<span class=newLine><strong>Comment Author</strong>, 28. 03. 2010.</span>
				</li>
			</ul>
		</section>
		<section>
			<h1>Company Bio</h1>
			<p>Nisl vestibulum ex, quis lectus elit consequatur, per lobortis ipsum, sit in id nunc vitae felis. Ut quae pellentesque vitae vel ligula, non quis quis quam, ante orci lectus tortor sapien sed aliquam, neque nam vehicula.</p>
			<p>Iaculis et quis, sociosqu aenean pulvinar metus, sed quis, sagittis a, at volutpat tempor.</p>
		</section>
	<p class=copyright>Copyright &copy; 2010 <strong>Fictive Company</strong>. All Rights Reserved.</p>
</footer>

</body>
</html>